<template>
  <div id="app">
    <!--测试框架代码，稍后熟练后可删除-->
    <!--<img v-on:click="checkOutJS()" src="assets/skin/default/login/img/logo.png" v-show="true"-->
    <!--v-bind:title="octopus.note">-->
    <!--<div v-html="octopus.template" ref="templateByVUE" id="templateByJquery"></div>-->
    <!--<div o-Container>此为八爪鱼渲染容器，会通过模板渲染引擎主动将组件渲染至页面。</div>-->
    <!--下面为主路由，加载组件用。-->

    <keep-alive exclude="mms_engine_database_item_list">
      <router-view :oData="octopus" />
    </keep-alive>

  </div>
</template>

<script>
import { remFn } from "../static/skin/default/base/js/rem";
export default {
  name: "App",
  // 事件只能使用方法，计算函数只能使用，不能直接挂载事件。
  methods: {
    checkOutJS: function () {
      // getout("hhh");
      this.$OutTestJS.getout("HHHH");
    },
    reloadRem() {
      remFn(1920, 7680)
    },
  },
  data() {
    return {
      // 八爪鱼自动框架数据
      octopus: this.$parent.octopus,
      transitionName: 'slide-left',
    };
  },
  // 生命周期钩子：创建后动态加载样式库
  created: function () {
    /* 动态按照用户状态加载样式 */
    // 以预编译的方式加载（性能更好）
    // import("./assets/skin/" + this.octopus.skinName + "/login/css/base.css");
    // import不能动态加载，因为是预编译的，但是require运行时可以。
    // import {testFun3} from "../src/assets/js/main.js";

    // require("./assets/js/tips.js");
    // require("/static/skin/default/admin/login/js/tips.js")

    // let o = this;

    // // 动态路由追加
    // this.$router.addRoutes([{
    //   path: '/NewRRR/:id',
    //   name: 'NewRRR',
    //   component: require('@/components/MarcoTest').default
    // }]);
    this.octopus.tips.debug("App.vue执行了created事件。");
  },
  // 生命周期钩子：安装完成，但是VUE不会承诺100%的完成才执行该事件。
  mounted: function () {
    // 以运行时的方式加载库
    // require("./assets/js/tips.js");
    // 全部完成的下一时刻，这个函数就很牛逼了。。生命周期连外面的JS、CSS都全部挂载好了，再执行这个方法。
    this.$nextTick(function () {
      // 启用八爪鱼渲染引擎
      this.octopus.render.init();
      this.octopus.tips.debug("App.vue执行了nextTick事件。");
    });
    this.reloadRem()
    window.addEventListener("resize", this.reloadRem, { passive: false });
  },
  // 更新前（组件更新前触发）
  beforeUpdate: function () {
    this.octopus.tips.debug("App.vue执行了beforeUpdate事件。");
  },
  // 更新后（组件更新完成后触发）
  updated: function () {
    // this.render = true;
    // 启用八爪鱼渲染引擎
    this.octopus.render.init();
    this.octopus.tips.debug("App.vue执行了updated事件。");
  },
  activated: function () {
    this.octopus.tips.debug("App.vue执行了activated事件。");
  },
  deactivated: function () {
    this.octopus.tips.debug("App.vue执行了deactivated事件。");
  },
  computed: {
    load: function () {
      this.octopus.tips.debug("执行了计算引擎");
    }
  },
  watch: {
    $route(to, from) {
      // this.octopus.route = to;
      this.octopus.tips.debug("App.vue路由：" + to.path + " - " + from.path + ", octopus.route: " + this.octopus.router.get().fullPath);
    }
  }
};
</script>

<style scoped></style>
